---
import { isExternal } from "src/languages";
import IconExternal from "@icons/External.astro";

interface Props {
  title: string;
  description: string;
  link: string;
}

const external = isExternal({ link: Astro.props.link });
---

<a href={Astro.props.link} target={external ? "_blank" : undefined} class="feature">
  <div class="icon"><slot name="icon" /></div>
  <div class="title">{Astro.props.title} {external ? <IconExternal size={24} /> : null}</div>
  <div class="description">{Astro.props.description}</div>
</a>

<style>
  .feature {
    @apply relative flex h-32 flex-col items-start gap-0 overflow-hidden rounded-xl p-2 text-left shadow-md transition-all hover:-translate-y-1 hover:shadow-xl focus:no-underline active:no-underline;
    background-color: var(--theme-card);
  }

  .icon {
    @apply absolute -left-3 -top-3 h-24 w-24;
  }

  .title,
  .description {
    @apply ml-24 text-left;
    color: var(--theme-text);
  }

  .title {
    @apply flex flex-nowrap text-nowrap py-2 text-2xl;
  }

  .description {
  }
</style>
